<template>
  <div class="app-container">
    <div class="container">
      <div class="title">基本信息</div>
      <table class="tablenew" cellpadding="0" cellspacing="0">
        <tr>
          <td class="lable_td">登记类型</td>
          <td style="width: 300px">
            <el-select
              v-model="from.typeValue"
              placeholder="请选择"
              style="width: 267px"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </td>
          <td class="lable_td">使用地</td>
          <td>
            <el-select
              v-model="from.palceValue"
              placeholder="请选择"
              style="width: 267px"
            >
              <el-option
                v-for="item in palceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td class="lable_td">设备品牌</td>
          <td style="width: 300px">
            <el-input v-model="value" />
          </td>
          <td class="lable_td">设备类型</td>
          <td>111111111</td>
        </tr>
        <tr>
          <td class="lable_td">设备型号</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">设备编号</td>
          <td><el-input v-model="value" /></td>
        </tr>
        <tr>
          <td class="lable_td">设备制造厂家</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">设备出厂日期</td>
          <td><el-input v-model="value" /></td>
        </tr>
        <tr>
          <td class="lable_td">发动机型号</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">发动机编号</td>
          <td><el-input v-model="value" /></td>
        </tr>
        <tr>
          <td class="lable_td">发动机制造厂家</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">发动机出厂日期</td>
          <td><el-input v-model="value" /></td>
        </tr>
        <tr>
          <td class="lable_td">额定功率(KW)</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">额定净功率(KW)</td>
          <td><el-input v-model="value" /></td>
        </tr>
        <tr>
          <td class="lable_td">设备所有人</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">身份证号</td>
          <td><el-input v-model="value" /></td>
        </tr>
        <tr>
          <td class="lable_td">所有人电话</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">所有人地址</td>
          <td><el-input v-model="value" /></td>
        </tr>
        <tr>
          <td class="lable_td">操作员</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">操作证编号</td>
          <td><el-input v-model="value" /></td>
        </tr>
        <tr>
          <td class="lable_td">操作员身份证</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">操作员电话</td>
          <td><el-input v-model="value" /></td>
        </tr>
        <tr>
          <td class="lable_td">燃料类型</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">设备当前所在位置</td>
          <td><el-input v-model="value" /></td>
        </tr>
        <tr>
          <td class="lable_td">车牌号</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">创建时间</td>
          <td>111111111</td>
        </tr>
        <tr>
          <td class="lable_td">PIN码</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">协助备案业务员</td>
          <td>111111111</td>
        </tr>
        <tr>
          <td class="lable_td">机械环保代码</td>
          <td style="width: 300px"><el-input v-model="value" /></td>
          <td class="lable_td">资料选择情况</td>
          <td>
            <el-checkbox-group v-model="from.checkList">
              <el-checkbox label="机械铭牌" disabled></el-checkbox>
              <el-checkbox label="发动机铭牌" disabled></el-checkbox>
              <el-checkbox label="合格证" disabled></el-checkbox>
              <el-checkbox label="环保信息标签" disabled></el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
      </table>

      <div class="title" style="margin-top: 50px">图片信息</div>
      <table class="tablenew" cellpadding="0" cellspacing="0">
        <tr>
          <td class="lable_td">身份证</td>
          <td>
            <div class="img_box">
              <img src="../../../assets/images/profile.jpg" alt="" />
              <img src="../../../assets/images/profile.jpg" alt="" />
              <div class="img_info">
                <el-form label-position="right" label-width="150px">
                  <el-form-item label="设备所有人:">
                    <el-input v-model="value"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号:">
                    <el-input v-model="value"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-checkbox-group v-model="from.checkList">
                      <el-checkbox label="姓名不符"></el-checkbox>
                      <el-checkbox label="身份证不符"></el-checkbox>
                      <el-checkbox label="图片模糊"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="lable_td">环保信息标签</td>
          <td>
            <div class="img_box">
              <img src="../../../assets/images/profile.jpg" alt="" />
              <div class="img_info">
                <el-form label-position="right" label-width="150px">
                  <el-form-item label="环保信息标签编号:">
                    <el-input v-model="value"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-checkbox-group v-model="from.checkList">
                      <el-checkbox label="环保信息标签编号不符"></el-checkbox>
                      <el-checkbox label="图片模糊"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="lable_td">发动机铭牌</td>
          <td>
            <div class="img_box">
              <img src="../../../assets/images/profile.jpg" alt="" />
              <div class="img_info">
                <el-form label-position="right" label-width="150px">
                  <el-form-item label="发动机编号:">
                    <el-input v-model="value"></el-input>
                  </el-form-item>
                  <el-form-item label="发动机型式核准号:">
                    <el-input v-model="value"></el-input>
                  </el-form-item>
                  <el-form-item label="发动机出厂日期:">
                    <el-input v-model="value"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-checkbox-group v-model="from.checkList">
                      <el-checkbox label="发动机编号不符"></el-checkbox>
                      <el-checkbox label="发动机型式核准号不符"></el-checkbox>
                      <el-checkbox label="出厂日期不符"></el-checkbox>
                      <el-checkbox label="图片模糊"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="lable_td">合格证</td>
          <td>
            <div class="img_box">
              <img src="../../../assets/images/profile.jpg" alt="" />
              <div class="img_info">
                <el-form label-position="right" label-width="100px">
                  <el-form-item>
                    <el-checkbox-group v-model="from.checkList">
                      <el-checkbox label="图片模糊"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="lable_td">发动机铭牌</td>
          <td>
            <div class="img_box">
              <img src="../../../assets/images/profile.jpg" alt="" />
              <div class="img_info">
                <el-form label-position="right" label-width="150px">
                  <el-form-item label="设备品牌:">
                    <el-input v-model="value"></el-input>
                  </el-form-item>
                  <el-form-item label="设备型号:">
                    <el-input v-model="value"></el-input>
                  </el-form-item>
                  <el-form-item label="设备编号:">
                    <el-input v-model="value"></el-input>
                  </el-form-item>
                  <el-form-item label="设备出厂日期:">
                    <el-input v-model="value"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-checkbox-group v-model="from.checkList">
                      <el-checkbox label="设备编号不符"></el-checkbox>
                      <el-checkbox label="设备出厂日期不符"></el-checkbox>
                      <el-checkbox label="图片模糊"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="lable_td">机械正面</td>
          <td>
            <div class="img_box">
              <img src="../../../assets/images/profile.jpg" alt="" />
              <div class="img_info">
                <el-form label-position="right" label-width="100px">
                  <el-form-item>
                    <el-checkbox-group v-model="from.checkList">
                      <el-checkbox label="图片模糊或不正确"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="lable_td">机械45度</td>
          <td>
            <div class="img_box">
              <img src="../../../assets/images/profile.jpg" alt="" />
              <div class="img_info">
                <el-form label-position="right" label-width="100px">
                  <el-form-item>
                    <el-checkbox-group v-model="from.checkList">
                      <el-checkbox label="图片模糊或不正确"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="lable_td">机械后面</td>
          <td>
            <div class="img_box">
              <img src="../../../assets/images/profile.jpg" alt="" />
              <div class="img_info">
                <el-form label-position="right" label-width="100px">
                  <el-form-item>
                    <el-checkbox-group v-model="from.checkList">
                      <el-checkbox label="图片模糊或不正确"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="lable_td">其他一</td>
          <td>111111111</td>
        </tr>
        <tr>
          <td class="lable_td">其他二</td>
          <td>111111111</td>
        </tr>
        <tr>
          <td class="lable_td">选择号码</td>
          <td>
            <div style="display: flex">
              <el-input
                v-if="step == 'first'"
                v-model="value"
                style="width: 200px"
              />
              <span v-else style="text-align: center; line-height: 48px">
                {{ value }}11111
              </span>

              <el-button
                v-if="step == 'first'"
                type="primary"
                plain
                @click="editCode"
              >
                修改号牌
              </el-button>
            </div>
          </td>
        </tr>
        <tr>
          <td class="lable_td">身份证</td>
          <td>111111111</td>
        </tr>
        <tr>
          <td class="lable_td">是否进入主城区</td>
          <td>
            <el-select
              v-model="from.typeValue"
              placeholder="请选择"
              style="width: 267px"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td class="lable_td">设备类型</td>
          <td>
            <el-select
              v-model="from.typeValue"
              placeholder="请选择"
              style="width: 267px"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>&emsp; 注:只能悬着第三级类型</span>
          </td>
        </tr>
        <tr>
          <td class="lable_td">设备附加属性</td>
          <td>
            <el-checkbox-group v-model="from.checkList">
              <el-checkbox label="带破碎"></el-checkbox>
              <el-checkbox label="带液压剪"></el-checkbox>
              <el-checkbox label="带震动锤"></el-checkbox>
              <el-checkbox label="带凿岩机"></el-checkbox>
              <el-checkbox label="带钻机"></el-checkbox>·
              <el-checkbox label="带鳄鱼剪"></el-checkbox>
              <el-checkbox label="带鹰钩"></el-checkbox>
              <el-checkbox label="带夯锤"></el-checkbox>
              <el-checkbox label="带液压抓"></el-checkbox>
              <el-checkbox label="带钳子"></el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
        <tr>
          <td class="lable_td">设备吨位</td>
          <td><el-input v-model="value" style="width: 50px" />&emsp;吨</td>
        </tr>
        <tr>
          <td class="lable_td">备注</td>
          <td><el-input v-model="value" style="width: 400px" /></td>
        </tr>
        <tr>
          <td class="lable_td">审核不通过原因</td>
          <td>
            <span>常用原因</span>&emsp;
            <el-select
              v-model="from.typeValue"
              placeholder="请选择"
              style="width: 267px"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </td>
        </tr>
      </table>

      <div class="btn-group">
        <div
          v-if="step == 'first' || step == 'second'"
          style="margin-right: 10px"
        >
          <el-button type="primary" @click="handleBack">通过</el-button>
          <el-button type="danger" @click="handleBack">不通过</el-button>
          <el-button type="primary" plain @click="handleBack">
            保存修改
          </el-button>
        </div>

        <el-button v-if="step == 'second'" type="primary" @click="handleBack"
          >退回初审</el-button
        >
        <el-button v-if="step == 'fourth'" type="primary" @click="handleBack"
          >注销</el-button
        >
        <el-button @click="handleBack">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      typeOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      palceOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      from: {
        typeValue: "选项1",
        palceValue: "选项3",
        checkList: ["机械铭牌", "发动机铭牌"],
      },
      value: "",
      step: "", //页面步骤
    };
  },
  created() {
    this.getRouteParams();
  },
  mounted() {},
  methods: {
    //获取路由参数
    getRouteParams() {
      this.step = this.$route.query.step;
      console.log(this.step);
    },
    handleBack() {
      this.$router.push({
        path: "/rescord/record",
      });
    },
    editCode() {
      this.canEditCode = !this.canEditCode;
    },
  },
};
</script>

<style lang='scss' scoped>
.container {
  padding: 10px 20px;
  .title {
    font-weight: 600;
    font-size: 28px !important;
    margin-bottom: 18px;
  }
  .lable_td {
    width: 180px;
    font-weight: 600;
    font-size: 17px !important;
  }

  .btn-group {
    margin-top: 10px;
    display: flex;
  }
  .img_box {
    display: flex;
    padding: 10px;
    img {
      margin-right: 10px;
    }
    .img_info {
      margin-left: 40px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .info_item {
        display: flex;
      }
    }
    ::v-deep .el-form-item {
      margin-bottom: 12px;
    }
  }
}

.tablenew {
  width: 80%;
  border-radius: 6px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #dbdbdb;
}
.tablenew tr td {
  border: 1px solid #dbdbdb;
  border-bottom: 0;
  border-right: 0;
  height: 48px;
  font-size: 14px;
  padding: 0 16px;
  color: #4d5051;
}
.tablenew tr td:nth-child(even) {
  color: #202426 !important;
}
.tablenew tr td:last-child {
  border-right: 1px solid #dbdbdb;
}
.tablenew tr:last-child td {
  border-bottom: 1px solid #dbdbdb;
}

.tablenew tr:first-child td {
  border-top: 0;
}
.tablenew tr:last-child td {
  border-bottom: 0;
}
.tablenew tr td:first-child {
  border-left: 0;
}
.tablenew tr td:last-child {
  border-right: 0;
}
</style>